'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import CATE from 'service/cate_service.jsx';
import FileUploader from 'page/component/file-upload/index.jsx';
import RichEditor   from 'page/component/rich-editor/index.jsx';
//引入依赖页面
import PageTitle from 'page/component/page-title/index.jsx';

//引入样式文件
import './index.scss';

const _comm    = new MMALL_COM();
const _cate = new CATE();
class ProductCategory extends React.Component{
    constructor(props){
        super(props);
        this.state={
            parentId:this.props.params.id,
            name:'',
            cateList:[]

        }
        //绑定this
    }
    componentDidMount(){
        this.getCateList(this.state.parentId);
    }
    //两次路径不一致，强制刷新
    componentDidUpdate(prevProps){
        let oldPath = prevProps.location.pathname,
            newPath = this.props.location.pathname,
            newId   = this.props.params.id || 0;
        if(oldPath !== newPath){
            this.getCateList(newId);
        }   
    }
    //加载分类
    getCateList(id){
        let parentId=id||0;
        _cate.getCateList(parentId).then(res=>{
            this.setState({
                cateList:res,
                parentId :parentId,

            });
        },msg=>{
            _comm.errorTip('出错了，请稍后再试')
        })
    }
    //修改分类名称
    onChangeCateName(cateId){
        let newName=window.prompt('请输入新名称');
        if(newName){
            let cate={
                categoryName:newName,
                categoryId:cateId
            }
            _cate.updateCategoryName(cate).then(res=>{
                this.getCateList(this.state.parentId);
            },
            msg=>{
                _comm.errorTip('出错了，请稍后再试')
            })
        }
    }
    //加载商品列表
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle pageTitle={'品类管理'} >
                    <div className="page-header-right">
                        <Link className="btn btn-primary" to="/product.category/add"><i className="fa fa-plus fa-fw"></i>添加品类</Link>
                    </div>
                </PageTitle>
                <div className="row">
                    <div className="col-lg-12"><p>当前商品分类ID：{this.state.parentId}</p></div>
                    <div className="table-wrap col-lg-12">
                        {/*parentId是否为0*/}                    
                        {this.state.parentId==0?
                        <table className="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>品类ID</th>
                                    <th>品类名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                { this.state.cateList.map((cate,index)=>{
                                return(
                                <tr key={index}>
                                    <td>{cate.id}</td>
                                    <td><span>{cate.name}</span></td>
                                    <td>
                                        <Link className="opera" onClick={this.onChangeCateName.bind(this,cate.id)}>修改名称</Link>
                                        <Link className="opera" to={'/product.category/index/'+cate.id}>查看其子品类</Link>
                                    </td>
                                </tr>
                                )})
                                }
                            </tbody>
                        </table>:
                        <table className="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>品类ID</th>
                                    <th>品类名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                { this.state.cateList.map((cate,index)=>{
                                return(
                                <tr key={index}>
                                    <td>{cate.id}</td>
                                    <td><span>{cate.name}</span></td>
                                    <td>
                                        <Link className="opera" onClick={this.onChangeCateName.bind(this,cate.id)} >修改名称</Link>
                                    </td>
                                </tr>
                                )})
                                }
                            </tbody>
                        </table>
                    }
                    </div>
                </div>
            </div>

        )
    }
}
export default ProductCategory;
